import { ref, unref, isRef, watchEffect } from 'vue'

function useFetch(url, headers) {
  const data = ref(null) // 接口返回值数据
  const error = ref(null) // 接口是否有报错

  function doFetch() {
    fetch(url, { headers: unref(headers) })
      .then((response) => response.json())
      .then((result) => {
        console.log('result', result)

        data.value = result.data
      })
      .catch((err) => {
        // 给 error 赋值
        error.value = err.message
      })
  }

  if (isRef(headers)) {
    // 有 ref 数据，就做监听且默认执行一次请求

    watchEffect(doFetch)
  } else {
    doFetch()
  }

  return {
    data,
    error
  }
}

export default useFetch
